import { PageContainer } from '@ant-design/pro-layout';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Card, List, Radio, Tabs } from 'antd';
import { QueryFilter, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import TabPane from '@ant-design/pro-card/lib/components/TabPane';
import type { OwnCourse } from '@/models/ownCourse';
import { Link, useDispatch } from 'umi';
import { activityList, countByType, teacherOptionList } from '@/services/ownCourse';
import moment from 'moment';
import ProList from '@ant-design/pro-list';
export default function CourseList() {
  // 未开始
  const [willStart, setWillStart] = useState<number>();
  // 已开始
  const [started, setStarted] = useState<number>();
  // 已结束
  const [end, setEnd] = useState<number>();
  const [long, setLong] = useState<number>();
  const [publicCount, setPublic] = useState<number>();
  const [experice, setExperice] = useState<number>();
  const [video, setVideo] = useState<number>();
  const [ve, setVideoExperice] = useState<number>();
  const [params, setParams] = useState<OwnCourse>({ type: 1, status: 1 });
  // 教师下拉列表
  const [selectTeacherData, setTeacherData] = useState<any>([]);

  const dispatch = useDispatch();

  useEffect(() => {
    // 连接课程状态
    dispatch({
      type: 'ownCourse/countByStatus',
      payload: {},
      callback: (res: any) => {
        // const array = res.map((item: OwnCourse) => ({
        //   id: item.status,
        //   countNum: item.count,
        // }));
        res.forEach((item: OwnCourse) => {
          if (item.status == 0) {
            setWillStart(item.count);
          } else if (item.status == 1) {
            setStarted(item.count);
          } else if (item.status == 2) {
            setEnd(item.count);
          }
        });
      },
    });
    // 连接课堂类型
    (async () => {
      const res = (await countByType({ status: 1 }))?.result;
      if (res) {
        res.forEach((e: OwnCourse) => {
          if (e.type == 1) {
            setLong(e.count);
          } else if (e.type == 2) {
            setPublic(e.count);
          } else if (e.type == 3) {
            setExperice(e.count);
          } else if (e.type == 4) {
            setVideo(e.count);
          } else {
            setVideoExperice(e.count);
          }
        });
      }
    })();
    //连接初始教师列表--todo
    (async () => {
      const res = (await teacherOptionList({}))?.result;
      setTeacherData(res);
    })();

    // 课程类型 1-长期课 2-公开课 3-体验课 4-录像启蒙课 5-录像启蒙课(体验)
  }, []);

  // 切换状态的onChange
  const changeStatus = async (e: any) => {
    setLong(0);
    setPublic(0);
    setExperice(0);
    setVideo(0);
    setVideoExperice(0);
    //切换状态，统计数量
    dispatch({
      type: 'ownCourse/countByType',
      payload: {
        status: e.target.value,
      },
      callback: (res: any) => {
        res.forEach((item: OwnCourse) => {
          if (item.type == 1) {
            setLong(item.count);
          } else if (item.type == 2) {
            setPublic(item.count);
          } else if (item.type == 3) {
            setExperice(item.count);
          } else if (item.type == 4) {
            setVideo(item.count);
          } else {
            setVideoExperice(item.count);
          }
        });
      },
    });

    setParams({ ...params, status: e.target.value });
  };

  // 切换课堂类型的onChange
  const changeType = async (type: any) => {
    setParams({ ...params, type: type });
  };

  const onRequest = async ({ keyWords }: any) => {
    if (keyWords.length == 0) {
      return [];
    }
    const data = (await teacherOptionList({ realName: keyWords })).result;
    return data?.map((item: any) => {
      return { label: `${item.realName} (${item.phone}) `, value: item.uid };
    });
  };
  return (
    <PageContainer>
      <Card className={styles.card}>
        课程状态：
        <Radio.Group
          defaultValue="1"
          buttonStyle="solid"
          className={styles.group}
          onChange={changeStatus}
        >
          <Radio.Button value="1">
            进行中(<span>{started || 0}</span>)
          </Radio.Button>
          <Radio.Button value="0">
            未开始(<span>{willStart || 0}</span>)
          </Radio.Button>
          <Radio.Button value="2">
            已结束(<span>{end || 0}</span>)
          </Radio.Button>
        </Radio.Group>
      </Card>
      <Card className={styles.card}>
        <QueryFilter
          defaultCollapsed={false}
          onReset={async () => {
            setParams({ type: params.type, status: params.status });
          }}
          onFinish={async (values) => {
            setParams({ ...params, ...values });
          }}
        >
          <ProFormText name="id" label="课程ID" allowClear={false} />
          <ProFormSelect
            allowClear={false}
            // fieldProps={{ onChange: onChange }}
            name="duan"
            label="爱棋道段位"
            showSearch
            valueEnum={{
              8: "旧版i-0",
              9: "启蒙零基础",
              10: "启蒙进阶突破",
              11: "i-1",
              12: "i-2",
              13: "i-3",
              14: "i-4",
              150: "i-5",
              160: "i-6",
              170: "i-7",
              180: "i-8",
              190: "i-9",
              200: "i-10",
              210: "i-11",
              220: "i-12"
            }}
          />
          <ProFormSelect
            allowClear={false}
            name="teacherId"
            label="主讲老师"
            showSearch
            debounceTime={500}
            request={onRequest}
            options={selectTeacherData}
          />
        </QueryFilter>
      </Card>
      <Card className={styles.card}>
        <Tabs defaultActiveKey="1" size="small" onChange={changeType}>
          <TabPane tab={<span>长期课({long || 0})</span>} key="1" />

          <TabPane tab={<span>体验课({experice || 0})</span>} key="3" />

          <TabPane tab={<span>录像启蒙课({video || 0})</span>} key="4" />

          <TabPane tab={<span>录像启蒙课-体验({ve || 0})</span>} key="5" />

          <TabPane tab={<span>公开课({publicCount || 0})</span>} key="2" />
        </Tabs>
        <ProList
          params={params}
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: true,
          }}
          rowKey="id"
          grid={{ gutter: 16, column: 2 }}
          request={async (param) => {
            param.currentPage = param.current;
            delete param.current;
            const msg = (await activityList(param))?.result;
            return {
              total: msg?.total,
              data: msg?.records,
            };
          }}
          // dataSource={longData}
          renderItem={(item: OwnCourse) => {
            const duanList = [
              '旧版i-0',
              '启蒙零基础',
              '启蒙进阶突破',
              'i-1',
              'i-2',
              'i-3',
              'i-4',
              "i-5",
              "i-6",
              "i-7",
              "i-8",
              "i-9",
              "i-10",
              "i-11",
              "i-12"
            ];
            return (
              <List.Item key={item.id}>
                <Link
                  to={`/course/info?id=${item.id}&name=${item.name}&teacherId=${item.teacherId}`}
                  target="_blank"
                >
                  <Card title={item.name} className={styles.card_gatter}>
                    <div className={styles.container_card}>
                      <div className={styles.left_contain}>
                        <span>课程ID:</span>
                        <span>爱棋道段位:</span>
                        <span>课程周期:</span>
                        <span>主讲老师:</span>
                        <span>在读学员:</span>
                      </div>
                      <div className={styles.right_contain}>
                        <div>{item.id !== null ? item.id : '-'}</div>
                        <div>{duanList[item.duan] ?? '-'}</div>
                        <div>
                          {item.startTime !== null || item.endTime !== null
                            ? `${moment(item.startTime).format('YYYY-MM-DD HH:mm')}至${moment(
                              item.endTime,
                            ).format('YYYY-MM-DD HH:mm')}`
                            : '-'}
                        </div>
                        <div>{item.teacherName !== null ? item.teacherName : '-'}</div>
                        <div>{item.currentStudentCount ?? '-'}</div>
                      </div>
                    </div>
                  </Card>
                </Link>
              </List.Item>
            );
          }}
        />
      </Card>
    </PageContainer>
  );
}
